import { useEffect, useState } from 'react'
import Article from '../../components/Article'
import './index.scss'
import { Card } from 'antd'
import labelList from '@/utils/lable'
import { Link } from 'react-router-dom'
import { getAllBlogAPI } from '@/api/blog'
import moment from 'moment'


const tabListNoTitle = [
  {
    key: 'recommend',
    label: '推荐',
  },
  {
    key: 'often',
    label: '常看',
  },
  {
    key: 'hot',
    label: '热榜',
  },
]
const Home = () => {
  const [activeTabKey, setActiveTabKey] = useState('recommend')
  const onTabChange = (key) => {
    setActiveTabKey(key)
  }

  // 获取所有博客
  const [blogList, setBlogList] = useState([])

  const params = {
    state: "已发布"
  }
  const getBlogList = async () => {
    const res = await getAllBlogAPI(params)
    setBlogList(res.data)
  }
  useEffect(() => {
    getBlogList()
  }, [])

  // 通过时间对博客进行排序得到推荐内容
  const recommendBlog = [...blogList].sort((a, b) => moment(b.createTime).diff(moment(a.createTime)))

  // 通过点赞量对博客进行排序得到热榜内容
  const hotBlog = [...blogList].sort((a, b) => b.likeNum - a.likeNum)

  const contentListNoTitle = {
    recommend: recommendBlog,
    often: blogList,
    hot: hotBlog,
  }
  return (
    <div className="home">
      <Card className='home-header'>
      {labelList.map(item => (
        <Link key={item.id} to={`/blogList?query=${item.name}`}>{item.name}</Link>
      ))}
      </Card>
        <Card
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey}
        onTabChange={onTabChange}
        tabProps={{
          size: 'large',
        }}
      >
        <Article
          blogList={contentListNoTitle[activeTabKey]}
          />
      </Card>
    </div>
  )
}

export default Home